<template>
    <div class="view-wrapper">
        <!-- app-container -->
        <div class="head">
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item label="商品查询：" prop="">
                    <el-input v-model="queryParams.query" placeholder="请输入ID/商品名称" clearable />
                </el-form-item>
                <el-form-item label="状态：" prop="">
                    <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
                        <el-option v-for="dict in statusList" :key="dict.id" :label="dict.value" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="修改时间：" prop="">
                    <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :clearable="false">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="listBox">
            <div class="listBox_head">
                <el-button type="primary" style="margin: 10px 0 20px" @click="addClick">新增兑换商品</el-button>
            </div>
            <el-table v-loading="loading" :data="tabList" stripe border>
                <el-table-column label="序号" align="center" type="index" width="64px" />
                <el-table-column label="商品ID" align="center" prop="goodsId" :show-overflow-tooltip="true" />
                <el-table-column label="商品名称" align="center" prop="name" :show-overflow-tooltip="true" />
                <el-table-column label="商品图片" align="center" prop="stock" :show-overflow-tooltip="true" >
                    <template slot-scope="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.img" fit="fill"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品价格" align="center" prop="payAmount" :show-overflow-tooltip="true" />
                <el-table-column label="库存" align="center" prop="total" :show-overflow-tooltip="true"/>
                <el-table-column label="剩余库存" align="center" prop="usable" :show-overflow-tooltip="true"/>
                <el-table-column label="已兑换数量" align="center" prop="used" :show-overflow-tooltip="true"/>
                <el-table-column label="状态" align="center"  :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 1">下架</div>
                        <div v-else-if="scope.row.status == 2">上架</div>
                    </template>
                </el-table-column>
                <el-table-column label="排序" align="center" prop="sort" :show-overflow-tooltip="true"/>
                <el-table-column label="修改时间" align="center" prop="updateTime" :show-overflow-tooltip="true"/>

                <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width"
                    fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="updateIssueStatus(scope.row)" v-if="scope.row.status==1">上架</el-button>
                        <el-button size="mini" type="text" @click="updateIssueStatus(scope.row)" v-if="scope.row.status==2">下架</el-button>
                        <el-button size="mini" type="text" @click="editClick(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList"></pagination>
        </div>
        <Dialog :id="dialogId" :pathType="pathType" v-bind="$attrs" v-if="dialogVisible" :visible.sync="dialogVisible"
            @success="_handleSuccess">
        </Dialog>
    </div>
</template>

<script>
import {
    merchantExchangeGoodsV1List,
    merchantExchangeGoodsV1UpdateStatus
} from "@/api/consumeMiningManagement/merchantRedemptionManagement";
import Dialog from "./components/dialog";
export default {
    name: "",
    components: {
        Dialog,
    },
    data() {
        return {
            dialogId:"", //选择id
            pathType:"add", 
            dialogVisible: false,
            loading: false,// 遮罩层
            total: 0,  // 总条数
            statusList:[
                {id:'',value:'全部'},
                {id:'1',value:'下架'},
                {id:'2',value:'上架'},
            ],
            //表格数据
            tabList: [],
            date: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                query: "", //商品ID/商品名称
                status: "", //商品状态 1 下架 2 上架
                updateStart:'', //修改时间开始
                updateEnd:'',//修改时间结束
            },
        };
    },
    created() {
        this.getList();
    },
    methods: {
      /** 上下架按钮操作 */
      updateIssueStatus(row) {
        let title = ''
        if (row.status == 1) { 
          title = '上架' 
        } else {
          title = '下架' 
        }
        this.$confirm('确定' + title + '此信息?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            merchantExchangeGoodsV1UpdateStatus(row.id).then(response => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          });

        }).catch(() => {});
      },
        /** 查询列表 */
        getList() {
            this.loading = true;
            merchantExchangeGoodsV1List(this.queryParams).then((response) => {
                this.tabList = response.result.records;
                this.total = response.result.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.updateStart = this.date[0];
            this.queryParams.updateEnd = this.date[1];
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.date = []
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                query: "", //商品ID/商品名称
                status: "", //商品状态 1 下架 2 上架
                updateStart:'', //修改时间开始
                updateEnd:'',//修改时间结束
            };
            this.handleQuery();
        },
        //新增
        addClick() {
            this.dialogId = null;
            this.dialogVisible = true;
            this.pathType = "add";
        },
        // 编辑
        editClick(row) {
            this.dialogId = row.id;
            this.pathType = "edit";
            this.dialogVisible = true;
        },
        _handleSuccess(e) {
            //成功回调
            // this.resetQuery()
            this.getList();
        },
    },
};
</script>

<style scoped>
.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
}

.listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
    margin-top: 10px;
}

.listBox_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.img_box {
    width: 100px;
    height: 80px;
    border-radius: 4px;
}
</style>